<template>
  <div>
    <v-card title="飞线效果图">
      <vcu-chart-geo
        :data="chartData"
        :settings="chartSettings"
        :legend-visible="false"
      />
    </v-card>
  </div>
</template>

<script>
const randomData = () => {
  return Math.round(Math.random() * 1000);
};
export default {
  data() {
    return {
      chartData: {
        measures: [
          {
            name: "北京",
            data: [
              { name: "上海", value: randomData() },
              { name: "齐齐哈尔市", value: randomData() },
              { name: "西宁市", value: randomData() },
              { name: "昆明市", value: randomData() },
            ],
          },
        ],
      },
      chartSettings: {
        mode: "lines",
        lineStyle: {
          color: "#ED3574",
          width: 1,
          opacity: 0.6,
          curveness: 0.2,
        },
        lineEffectVisible: false,
        lineEffect: {
          period: 0,
          trailLength: 0,
          color: "#fff",
          symbolSize: 3,
        },
        overlayEffectVisible: true,
        overlayEffect: {
          period: 5,
          trailLength: 0.4,
          symbol: "arrow",
          symbolSize: 6,
        },
        effectScatterLabelVisible: true,
        effectScatterLabel: {
          normal: { position: "left" },
        },
        visualMapVisible: true,
        visualMap: {
          inRange: {
            color: ["#C6FFDD", "#FBD786", "#f7797d"],
          },
        },
        symbolSize: 10,
        itemStyle: {
          normal: {
            areaColor: "#020933",
            borderColor: "#3fdaff",
            borderWidth: 1,
            shadowColor: "rgba(63, 218, 255, 0.5)",
            shadowBlur: 10,
          },
          emphasis: {
            areaColor: "#2B91B7",
          },
        },
      },
    };
  },
  methods: {},
  created() {},
};
</script>
<style lang="less" scoped>
</style>
